<template>
  <div style="background: #fff">
    <div class="h100" v-if="!ischeck">
      <div class="edit-department" >
        <a-spin :spinning="spinning" tip="正在加载数据中...">
          <a-form :form="form">
            <a-row :gutter="10">
              <a-col :span="8">
                <a-form-item label="服务名称" :labelCol="{ span: 8 }" :wrapperCol="{ span: 12 }">
                  <a-input
                    v-decorator="[
                      'NAME',
                      {
                        rules: [{ required: true, message: '', whitespace: true, trigger: 'change' }],
                      },
                    ]"
                    autocomplete="off"
                    placeholder="请输入服务名称"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="公司名称" :labelCol="{ span: 8 }" :wrapperCol="{ span: 12 }">
                  <a-input
                    v-decorator="[
                      'GSNAME',
                      {
                        rules: [{ required: true, message: '', whitespace: true, trigger: 'change' }],
                      },
                    ]"
                    autocomplete="off"
                    placeholder="请输入公司名称"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="参考服务价格(可议价)" :labelCol="{ span: 8 }" :wrapperCol="{ span: 12 }">
                  <a-input
                    v-decorator="[
                      'CKFWJG',
                      {
                        rules: [{ required: true, message: '', whitespace: true, trigger: 'change' }],
                      },
                    ]"
                    autocomplete="off"
                    placeholder="请输入参考服务价格"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="公司地址" :labelCol="{ span: 8 }" :wrapperCol="{ span: 12 }">
                  <a-input
                    v-decorator="[
                      'GSDZ',
                      {
                        rules: [{ required: true, message: '', whitespace: true, trigger: 'change' }],
                      },
                    ]"
                    autocomplete="off"
                    placeholder="请输入公司地址"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="法人代表" :labelCol="{ span: 8 }" :wrapperCol="{ span: 12 }">
                  <a-input
                    v-decorator="[
                      'FRDB',
                      {
                        rules: [{ required: true, message: '', whitespace: true, trigger: 'change' }],
                      },
                    ]"
                    autocomplete="off"
                    placeholder="请输入法人代表"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="身份证号" :labelCol="{ span: 8 }" :wrapperCol="{ span: 12 }">
                  <a-input
                    v-decorator="[
                      'SFZH',
                      {
                        rules: [
                          { required: true, message: '', whitespace: true, trigger: 'change' },
                          { validator: validateIDCard },
                        ],
                      },
                    ]"
                    autocomplete="off"
                    placeholder="请输入身份证号"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="联系方式" :labelCol="{ span: 8 }" :wrapperCol="{ span: 12 }">
                  <a-input
                    v-decorator="[
                      'LXFS',
                      {
                        rules: [
                          { required: false, message: '', whitespace: true, trigger: 'change' },
                          { validator: validatePhone },
                        ],
                      },
                    ]"
                    autocomplete="off"
                    placeholder="请输入联系方式"
                  />
                </a-form-item>
              </a-col>
              <!-- <a-col :span="24"> -->
              <a-col :span="24">
                <a-form-item label="公司logo上传" :labelCol="{ span: 3 }" :wrapperCol="{ span: 12 }">
                  <a-upload
                    name="avatar"
                    list-type="picture-card"
                    class="avatar-uploader"
                    :headers="headers"
                    :show-upload-list="false"
                    :action="action"
                    :before-upload="beforeUpload"
                    @change="handleChange1"
                  >
                    <img v-if="imageUrl" :src=" upload + imageUrl" alt="avatar" />
                    <div v-else>
                      <div class="ant-upload-text">Upload</div>
                    </div>
                  </a-upload>
                </a-form-item>
              </a-col>
              <a-col :span="24">
                <a-form-item label="封面图片上传" :labelCol="{ span: 3 }" :wrapperCol="{ span: 12 }">
                  <a-upload
                    :action="action"
                    :headers="headers"
                    list-type="picture-card"
                    :file-list="fileList"
                    @preview="handlePreview"
                    @change="handleChange"
                  >
                    <div v-if="fileList.length < 1">
                      <a-icon type="plus" />
                      <div class="ant-upload-text">Upload</div>
                    </div>
                  </a-upload>
                  <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
                    <img alt="example" style="width: 100%" :src="previewImage" />
                  </a-modal>
                </a-form-item>
              </a-col>
              <!-- </a-col> -->
              <a-col :span="24"> </a-col>
            </a-row>
          </a-form>
          <button class="sub-btn" @click="handleSubmit">提交</button>
        </a-spin>
      </div>
    </div>

    <div class="h100" v-else>
      <div class="check-department">
        <a-row :gutter="25">
          <a-col :span="8">
            <div class="membership-item">
              服务名称: <span>{{ reviewItems.NAME }}</span>
            </div>
          </a-col>
          <a-col :span="8">
            <div class="membership-item">
              公司名称: <span>{{ reviewItems.GSNAME }}</span>
            </div>
          </a-col>
          <a-col :span="8">
            <div class="membership-item">
              参考服务价格(可议价):<span>{{ reviewItems.CKFWJG }}</span>
            </div>
          </a-col>
          <a-col :span="8">
            <div class="membership-item">
              公司地址:<span>{{ reviewItems.GSDZ }}</span>
            </div>
          </a-col>
          <a-col :span="8">
            <div class="membership-item">
              法人代表:<span>{{ reviewItems.FRDB }}</span>
            </div>
          </a-col>
          <a-col :span="8">
            <div class="membership-item">
              身份证号:<span>{{ reviewItems.SFZH }}</span>
            </div>
          </a-col>
          <a-col :span="8">
            <div class="membership-item">
              联系方式:<span>{{ reviewItems.LXFS }}</span>
            </div>
          </a-col>
          <!-- <a-col :span="24"> -->
          <a-col :span="24">
            <div class="membership-item">
              公司LOGO:<span>
                <img :src="upload + reviewItems.Logo" alt="" />
              </span>
            </div>
          </a-col>
          <a-col :span="24">
            <div class="membership-item">
              封面图片:<span>
                <img :src="upload + reviewItems.GSZZZS" alt="" />
              </span>
            </div>
          </a-col>
          <!-- </a-col> -->
          <a-col :span="24">
            <div class="under-review">
              <img src="~@/assets/reception/file.gif" alt="动态图片" />
              <!-- {{ reviewItems.SHZT }} -->
              <span class="modify-enterprise" @click="modifyEnt"> 修改 </span>
            </div>
          </a-col>
        </a-row>
      </div>
    </div>
  </div>
</template>

<script>
import { STable } from '@/components'
import pick from 'lodash.pick'
import { getQYByIDApi, postupdateQYZCApi } from '@/api/service'
import { getAppGetUserByIDApi } from '@/api/resService'
import EditDepartment from './edit'
import { validPassword, validAccountNumber, validChineseChar, validIDCard, validTelphone } from '@/utils/validate'
import storage from 'store'
import { ACCESS_TOKEN } from '@/store/mutation-types'

export default {
  name: 'enterprise',
  components: {
    STable,
    EditDepartment,
  },
  data() {
    return {
      reviewItems: {},
      ischeck: true,
      upload: process.env.VUE_APP_API_BASE_URL,
      spinning: false,
      previewVisible: false,
      previewImage: '',
      fileListtt: '',
      action: process.env.VUE_APP_API_BASE_URL + '/api/uploadFile/UploadPictures',
      headers: {
        Authorization: storage.get(ACCESS_TOKEN),
        GF: this.$store.getters.userid,
      },
      imageUrl: '',
      form: this.$form.createForm(this, { name: 'user' }),
      fileList: [],
      // 查询参数
      queryParam: {
        UserID: this.$store.getters.userid,
      },
      // 加载数据方法 必须为 Promise 对象
      loadData: (parameter) => {
        return getQYByIDApi(Object.assign(parameter, this.queryParam)).then((res) => {
          return res
        })
      },
      propsData: {
        type: 'add',
        id: '',
      },
    }
  },
  methods: {
    displayContent(text) {
      if (text <= 100) {
        return text
      }
      return text.substring(0, 100) + '...'
    },
    modifyEnt() {
      const {
        form: { setFieldsValue },
      } = this
      this.ischeck = false
      this.$nextTick(() => {
        setFieldsValue(pick(this.reviewItems, ['NAME', 'GSNAME', 'CKFWJG', 'GSDZ', 'FRDB', 'SFZH', 'LXFS']))
        this.fileList = [
          { uid: '-1', name: 'this.reviewItems.GSZZZS', url: process.env.VUE_APP_API_BASE_URL + this.reviewItems.GSZZZS, status: 'done', response:{
            data:[this.reviewItems.GSZZZS]
          } },
        ]
        this.imageUrl = this.reviewItems.Logo
      })
    },
    handleCancel() {
      this.previewVisible = false
    },
    async handlePreview(file) {
      if (!file.url && !file.preview) {
        file.preview = await getBase64(file.originFileObj)
      }
      this.previewImage = file.url || file.preview
      this.previewVisible = true
    },
    validateIDCard(rule, value, callback) {
      if (!value) {
        callback(new Error('请输入身份证号'))
      }
      if (!validIDCard(value)) {
        callback(new Error('身份证号输入有误，请重新输入'))
      }
      callback()
    },
    validatePhone(rule, value, callback) {
      if (!value) {
        callback()
      }
      if (!validTelphone(value)) {
        callback(new Error('联系电话输入有误，请重新输入'))
      }
      callback()
    },
    handleChange({ fileList }) {
      this.fileList = fileList
    },
    handleChange1(info) {
      let fileListt = [...info.fileList]
      fileListt = fileListt.slice(-1)
      fileListt = fileListt.map((file) => {
        if (file.response) {
          const url = process.env.VUE_APP_API_BASE_URL + file.response.data[0]
          this.imageUrl = file.response.data[0]
          file.url = url
        }
        return file
      })
      this.fileListtt = fileListt
    },
    beforeUpload(file) {
      const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'
      if (!isJpgOrPng) {
        this.$message.error('You can only upload JPG file!')
      }
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isLt2M) {
        this.$message.error('Image must smaller than 2MB!')
      }
      return isJpgOrPng && isLt2M
    },
    getAppGetUserByID() {
      getAppGetUserByIDApi({
        ID: this.$store.getters.userid,
      })
        .then((res) => {
          this.reviewItems = res.data[0]
        })
        .catch((err) => {
          console.log('err', err)
        })
    },
    handleSubmit() {
      const {
        form: { validateFields, $message },
      } = this
      validateFields({ force: true }, (err, values) => {
        console.log('values', err, values)
        postupdateQYZCApi(
          Object.assign({}, values, {
            ID:this.reviewItems.ID,
            YHID: this.$store.getters.userid,
            Fid: '',
            Logo: this.imageUrl,
            GSZZZS: this.fileList[0].response.data[0],
          })
        )
          .then((res) => {
            if (res.code === 200) {
              $message.success('提交成功', 3)
              this.handleCancel()
              // this.$parent.$parent.$refs.table.refresh()
            } else {
              $message.error('提交失败', res.msg)
            }
            getAppGetUserByIDApi({
              ID: this.$store.getters.userid,
            })
              .then((res) => {
                this.reviewItems = res.data[0]
                this.ischeck = true
              })
              .catch((err) => {
                console.log('err', err)
              })
          })
          .catch((err) => {
            $message.error(err, 3)
          })
          .finally(() => {
            this.confirmLoading = false
          })
      })
    },
  },
  mounted() {
    this.getAppGetUserByID()
  },
}
</script>
<style lang="less" scoped>
.sub-btn {
  margin: 0 auto;
  display: block;
  background: #674de8;
  color: #fff;
  cursor: pointer;
  padding: 10px 30px;
  border-radius: 5px;
  border: none;
}
.edit-department {
  margin: 0 auto;
  padding-top: 40px;
  // width: 1000px;
  padding-bottom: 205px;
}
.check-department {
  margin: 0 auto;
  padding-top: 10px;
  width: 1000px;
  padding-bottom: 25px;
  .membership-item {
    margin: 20px 0;
    font-size: 20px;
    // text-align: center;
    span {
      color: #000;
    }
    img {
      height: 150px;
      max-width: 300px;
    }
  }
}
.under-review {
  text-align: center;
  font-size: 24px;
  img {
    // display: block;
    margin: 0 auto;
    width: 150px;
    height: 150px;
  }
  .modify-enterprise {
    background: #674de8;
    color: #fff;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 15px;
  }
}
</style>
